<script setup lang="ts">
import { reactive, ref, onUnmounted, watch, toRefs } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  time: {
    type: Number,
    default: 15000
  },
  autoplay: {
    type: Boolean,
    default: true
  },
})
const { list, time, autoplay } = toRefs(props)

const idx = ref(0)
const timer = ref(0)

const doAotuplay = () => {
  timer.value = window.setInterval(() => {
    idx.value++
    if (idx.value >= list.value.length) {
      idx.value = 0
    }
  }, time.value)
}
watch(list, (newValue, oldValue) => {
  // 如果为true就自动播放
  if (newValue.length && autoplay) {
    idx.value = 0
    doAotuplay()
  }
}, { immediate: true })
// 组件销毁后 关闭定时器
onUnmounted(() => {
  window.clearInterval(timer.value)
})

// 鼠标进入关闭定时器
const enter = () => {
  window.clearInterval(timer.value)
}
// 鼠标离开后开启定时器
const leave = () => {
  doAotuplay()
}

// 上一页下一页
const toggle = (i: number) => {
  idx.value += i
  // 如果索引大于长度就从0开始
  if (idx.value >= list.value.length) {
    idx.value = 0
  }
  // 如果索引小于0就从长度-1开始 因为是按照索引排的要减一
  if (idx.value < 0) {
    idx.value = list.value.length - 1
  }
}
</script>

<template>
  <div class='swiper-wrap' @mouseenter="enter" @mouseleave="leave">
    <ul class="carousel-body">
      <li class="carousel-item" v-for="(item,i) in list" :class="{fade:i===idx}" :key="i">
        <slot :name="i"></slot>
      </li>
    </ul>
    <template v-if="list.length>1">
      <div class="carousel-btn prev" @click="toggle(-1)"></div>
      <div class="carousel-btn next" @click="toggle(1)"></div>
    </template>
    <div class="carousel-indicator" v-if="list.length>1">
      <div class="dot" v-for="(item,i) in list.length" @click="idx=i" :class="{active:idx===i}" :key="i"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.swiper-wrap {
  width: 100%;
  height: 100%;
  position: relative;

  .carousel {
    &-body {
      width: 100%;
      height: 100%;
    }

    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s linear;

      &.fade {
        opacity: 1;
        z-index: 1;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-indicator {
      position: absolute;
      left: 0;
      bottom: 20px;
      z-index: 2;
      width: 100%;
      text-align: center;

      .dot {
        display: inline-block;
        width: 24px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        cursor: pointer;

        ~.dot {
          margin-left: 12px;
        }

        &.active {
          background: rgba(0, 0, 0, 0.4);
        }
      }
    }

    &-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      transition: all 0.5s;
      cursor: pointer;

      &.prev {
        left: 20px;
        background-image: url('@/assets/icon/left.png');

        &:hover {
          background-image: url('@/assets/icon/left-h.png');
        }
      }

      &.next {
        right: 20px;
        background-image: url('@/assets/icon/right.png');

        &:hover {
          background-image: url('@/assets/icon/right-h.png');
        }
      }
    }
  }
}
</style>